<template>
  <!-- 在模板中定义一个 div 元素作为图表容器 -->
  <div ref="chart" ></div>
</template>

<script setup>
// 获取数据
import {onBeforeMount,reactive } from 'vue';
import router from '@/router/router';
import { getMenuList } from '../../router/router';
import useCounter from '../../stores/pinia';
import {getPageCountAPI} from '@/api/page'

const routeTitles = [];
const routePath=[]
const newValues=[]
const counterStore=useCounter()

getMenuList().then((list)=>{
    list.forEach(item=>{
      routePath.push(item.name)
      routeTitles.push(item.title)
    })
  })


onMounted(async() => {


  const result=await getPageCountAPI({userId:counterStore.userId})
  const data=result.data.data
  delete data.id
  // const keys=Object.keys(data);
  // const values=Object.values(data)
  // 让后端传过来的字段和前端从路由那获取到的字段相匹配
  routePath.forEach(key=>{
    newValues.push(data[key])
  })
  console.log(routeTitles)
  console.log(newValues)
  // 更新 form 中的对象
const newData = newValues.map((value, index) => ({
  value,
  name: routeTitles[index]
}));

form.value = [...newData];
// console.log(form.value)
  initChart()
});






// 导入 ECharts 库
import * as echarts from 'echarts';
// 导入 Vue 的 Composition API
import { onMounted, onBeforeUnmount, ref } from 'vue';

// 定义用于保存 ECharts 实例的引用
const chartInstance = ref(null);
// 通过 ref 获取图表容器 DOM 元素
const chart = ref(null);

const form=ref([])

// console.log(form.value)
// 初始化图表的方法
function initChart() {
  // 初始化 ECharts 实例
  chartInstance.value = echarts.init(chart.value);

  // 定义图表配置选项
  const option = {
    tooltip: {
      // 配置提示框触发方式
      trigger: 'item'
    },
    series: [
      {
        // 系列名称
        name: '访问来源',
        // 图表类型为饼图
        type: 'pie',
        // 饼图的半径百分比
        radius: '50%',
        // 数据数组
        data: form.value,
        // 高亮效果配置
        emphasis: {
          itemStyle: {
            // 模糊阴影大小
            shadowBlur: 10,
            // 阴影水平偏移量
            shadowOffsetX: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 设置图表选项
  chartInstance.value.setOption(option);
}

// 当组件被挂载到 DOM 后执行
// onMounted(() => {
//   initChart();
// });

// 在组件销毁前执行
onBeforeUnmount(() => {
  // 清除图表实例以释放资源
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }
});
</script>
<style scoped>
div{
  width:100%;
  height: 100%;
}
</style>
